<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0
        }
        html,body{
            height:3000px;
        }
        #box1{
            width:1000px;
            height:100px;
            position: fixed;
            top:0; bottom:0;
            left:0; right:0;
            margin:-150px auto auto;
            background:yellowgreen;
            font-size: 50px;
            color:aqua;
            text-align: center;
            line-height: 100px;
            transition: 1s;
        }
        #btn{
            width:70px;
            height:70px;
            position:fixed;
            bottom:100px; right:100px;
            background:orange;
            font-size: 25px;
            color:#fff;
            padding-left:5px;
            box-sizing: content-box;
            border:none;
            display: none;
        }
    </style>
</head>
<body>
    <!-- <div id="box"></div> -->
    <div id="box1">欢迎来到  我的世界！！！</div>
    <button id="btn">回到顶部</button>
</body>
</html>
<script>
/* 
    //在页面上出现倒计时
    var box = document.getElementById("box");
    setInterval(function(){
        var now = new Date();
        var will = new Date(2023,0,1,0,0,0)
        var res = will - now;
        box.innerText = (`距离2023年还有：${parseInt(res/1000/60/60/24)}天${parseInt(res%(1000*60*60*24)/(1000*60*60))}小时${parseInt(res%(1000*60*60)/(1000*60))}分钟${parseInt(res%(1000*60)/1000)}秒`)
    },1000)
*/

    //自己 创意写一个 顶部 公告栏；根据浏览器的滚动条，让公告栏出现和消失
    var box1 = document.getElementById("box1");
    var box2 = document.getElementById("box2");
    var btn = document.getElementById("btn");
    window.onscroll = function(){
        var slide = document.documentElement.scrollTop || document.body.scrollTop;
        slide >= 500 ? box1.style.margin = "0 auto auto" : box1.style.margin = "-150px auto auto"  
        slide >= 500 ? btn.style.display="block" : btn.style.display="none"      
    }
    btn.onclick = function(){
        window.scrollTo(0,0);
    }
    

</script>